import React, { Component } from 'react';


import { Switch } from 'antd';
import { } from '@ant-design/icons';
import '../../../../assets/styles/Controlpage/Juanlian.css'


class Juanlian extends Component {
    state = {
        r: '',
        l: '',
        ksig: null,
       

    }
    render() {
        // this.setState({
        //     ksig:this.props.value
        // })
        const men = () => {
            this.props.aaa()
            this.setState({
                ksig: !this.state.ksig
            })

            // if (defaultChecked) {
            //     this.state.l.style.transform = 'rotateY(-180deg)'
            //     this.state.r.style.transform = 'rotateY(180deg)'
            // } else {
            //     this.state.l.style.transform = 'rotateY(0deg)'
            //     this.state.r.style.transform = 'rotateY(0deg)'
            // }
        }
        const keig = this.state.ksig
       
        const y = { transform: 'rotateY(-180deg)' }
        const y1 = {  transform: 'rotateY(0deg)' }
        const x = { transform: 'rotateY(180deg)'}
        const x1 = { transform: 'rotateY(0deg)' }
      
        return (

            (<>
                <p>&nbsp;采光</p>
                <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={this.state.ksig} className="kaiguan" onClick={(checked) => { men(checked) }} />

                <div>
                    <section className='bbb'>

                        <div className="l" style={ keig? y:y1} ></div>
                <div className="r"  style={ keig? x:x1} ></div>
            </section>
                </div >

            </>)
        )
    }
    componentDidMount() {

        var l = document.querySelector('.l')
        var r = document.querySelector('.r')
        this.setState({
            l,
            r,
            ksig: this.props.value
        })

    }
    // shouldComponentUpdate(nextProps, nextState) {
    //     // console.log(this.props, nextProps)

    //     if (nextProps.value !== this.props.value) {
    //         // console.log(this.state.ksig);
    //         setTimeout(() => {
    //             this.setState({
    //                 ksig: this.props.value
    //             })
    //         })
    //         return true;
    //     }
    //     return true; //this is the missing piece
    // }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.value !== prevState.ksig) {
            return {
                ksig: nextProps.value
            }
        } else {
            return null
        }
    }


}





export default Juanlian;
